<template>
  <div class="feed">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <!-- 展示评论表单 -->
          <PostForm @update="getPosts"/>
          <!-- 展示点赞内容 -->
          <PostFeed
            @update="getPosts"
            v-for="(post, index) in posts"
            :key="index"
            :post="post"
            :showAction="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import PostForm from "./PostForm";
import PostFeed from "./PostFeed";

export default {
  data() {
    return {
      posts: [],
      errors: {}
    };
  },
  components: { PostForm, PostFeed },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getPosts();
    });
  },
  methods: {
    getPosts() {
      this.$axios
        .get("http://localhost:5000/api/posts")
        .then(res => {
          this.posts = res.data;
          // console.log(this.posts);
        })
        .catch(err => {
          this.errors = err.response.data;
        });
    }
  }
};
</script>

<style scoped lang="stylus">
</style>
